<template>
  <div>
    <!-- 筛选项 -->
    <el-form v-show="showSearch" :model="searchForm" :inline="true" class="demo-form-inline" label-suffix="："
      size="small">
      <el-form-item label="病害类型">
        <el-select filterable v-model="searchForm.diseaseTypeUuid" placeholder="请选择" clearable>
          <el-option v-for="item in binghaiOptions" :key="item.oftenUuid" :label="item.oftenName"
            :value="item.oftenUuid" />
        </el-select>
      </el-form-item>
      <el-form-item label="设施类型">
        <el-cascader filterable style="width:100%" @change="selSheShi" v-model="searchForm.facilityTypeUuid"
          :options="sheshileixingOptions"
          :props="{ children: 'list', value: 'facilityTypeUuid', label: 'facilityTypeName' }" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="构件/设备类型">
        <el-select filterable v-model="searchForm.componentTypeUuid" placeholder="请选择" clearable>
          <el-option v-for="item in goujianOptions" :key="item.componentTypeUuid" :label="item.componentTypeName"
            :value="item.componentTypeUuid" />
        </el-select>
      </el-form-item>
      <el-form-item label="病害内容">
        <el-input v-model="searchForm.diseaseContent" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-form>
    <!-- 操作 -->
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="addItem" size="small">新增</el-button>
        <el-button icon="el-icon-search" type="primary" @click="reqTableData(1)" size="small">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetReq()" size="small">重置</el-button>
      </div>
      <RightToolbar :showSearch.sync="showSearch" @queryTable="reqTableData(1)"></RightToolbar>
    </div>
    <!-- 表格 -->
    <el-table class="tableStyle" v-loading="loading" :data="tableData">
      <el-table-column v-for="(item, index) in tableTitle" :key="index" :prop="item.prop" :label="item.label"
        :type="item.type" :fixed="item.fixed ? item.fixed : null" :align="item.align"
        :width="item.width"></el-table-column>
      <el-table-column align="center" label="捆绑时限（小时）">
        <el-table-column prop="leve1" label="轻微" align="center" width="100"></el-table-column>
        <el-table-column prop="leve2" label="一般" align="center" width="100"></el-table-column>
        <el-table-column prop="leve3" label="严重" align="center" width="100"></el-table-column>
        <el-table-column prop="leve4" label="紧急" align="center" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template #default='scope'>
          <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="text" @click="delRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <paginationCom :pagination="pagination" @handleSizeChange="handleSizeChange"
      @handleCurrentChange=handleCurrentChange>
    </paginationCom>
    <!-- 新增病害标准 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="addVisible" width="900px">
      <el-form :model="ruleForm" ref="ruleForm" :inline="true" label-width="130px" class="demo-ruleForm">
        <el-form-item label="管理层级" :rules="{ required: true, message: '管理层级不能为空', trigger: 'blur' }"
          prop="manageLevelUuid">
          <el-select v-model="ruleForm.manageLevelUuid" filterable placeholder="请选择" clearable>
            <el-option v-for="item in guanlicengjiOptions" :key="item.oftenUuid" :label="item.oftenName"
              :value="item.oftenUuid" />
          </el-select>
        </el-form-item>
        <el-form-item label="病害类型" :rules="{ required: true, message: '病害类型不能为空', trigger: 'blur' }"
          prop="diseaseTypeUuid">
          <el-select v-model="ruleForm.diseaseTypeUuid" placeholder="请选择" filterable clearable>
            <el-option v-for="item in binghaiOptions" :key="item.oftenUuid" :label="item.oftenName"
              :value="item.oftenUuid" />
          </el-select>
        </el-form-item>
        <el-form-item label="病害内容" :rules="{ required: true, message: '病害内容不能为空', trigger: 'blur' }"
          prop="diseaseContent">
          <el-input v-model="ruleForm.diseaseContent" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="设施类型" :rules="{ required: true, message: '设施类型不能为空', trigger: 'blur' }"
          prop="facilityTypeUuid">
          <el-cascader style="width:100%" @change="getSheShi" v-model="ruleForm.facilityTypeUuid"
            :options="sheshileixingOptions"
            :props="{ children: 'list', value: 'facilityTypeUuid', label: 'facilityTypeName' }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="设施等级" :rules="{ required: true, message: '设施等级不能为空', trigger: 'blur' }"
          prop="facilityLevel">
          <el-select v-model="ruleForm.facilityLevel" placeholder="请选择" filterable clearable>
            <el-option v-for="item in sheshiDengJiOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="构件/设备类型" :rules="{ required: true, message: '构件/设备类型不能为空', trigger: 'change' }"
          prop="componentTypeUuid">
          <el-select v-model="ruleForm.componentTypeUuid" placeholder="请选择" filterable clearable>
            <el-option v-for="item in goujianOptions" :key="item.componentTypeUuid" :label="item.componentTypeName"
              :value="item.componentTypeUuid" />
          </el-select>
        </el-form-item>
        <el-form-item label="单位" :rules="{ required: true, message: '单位不能为空', trigger: 'blur' }" prop="jlUnit">
          <el-input v-model="ruleForm.jlUnit" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="ruleForm" ref="ruleForm" :inline="true" label-width="10px" class="demo-ruleForm">
        <el-row style="margin-left:90px;height: 230px;">
          <el-col :span="5">
            <div style="line-height:250px;border: 1px solid #CCCCCC;text-align: center">捆绑时限（小时）</div>
          </el-col>
          <el-col :span="5">
            <div style="height: 250px;border-top: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC">
              <p style="border-bottom: 1px solid #CCCCCC" class="itemP">轻微</p>
              <p style="border-bottom: 1px solid #CCCCCC" class="itemP">一般</p>
              <p style="border-bottom: 1px solid #CCCCCC" class="itemP">严重</p>
              <p class="itemP">紧急</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="height:250px;border: 1px solid #CCCCCC">
              <div style="height:50px;padding-top:10px;padding-left:10px;">
                <el-form-item label=" " :rules="{ required: true, message: '不能为空', trigger: 'blur' }" prop="leve1">
                  <el-input type="number"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
                    v-model="ruleForm.leve1"></el-input>
                </el-form-item>
              </div>
              <div style="height:50px;border-top: 1px solid #CCCCCC;padding-top:10px;padding-left:10px;">
                <el-form-item label=" " :rules="{ required: true, message: '不能为空', trigger: 'blur' }" prop="leve2">
                  <el-input type="number"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
                    v-model="ruleForm.leve2"></el-input>
                </el-form-item>
              </div>
              <div style="height:50px;border-top: 1px solid #CCCCCC;padding-top:10px;padding-left:10px;">
                <el-form-item label=" " :rules="{ required: true, message: '不能为空', trigger: 'blur' }" prop="leve3">
                  <el-input type="number"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
                    v-model="ruleForm.leve3"></el-input>
                </el-form-item>
              </div>
              <div style="height:50px;border-top: 1px solid #CCCCCC;padding-top:10px;padding-left:10px;">
                <el-form-item label=" " :rules="{ required: true, message: '不能为空', trigger: 'blur' }" prop="leve4">
                  <el-input type="number"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
                    v-model="ruleForm.leve4"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="anniu">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'disease',
  data() {
    return {
      searchForm: {},
      showSearch: true,
      loading: true,
      tableTitle: [
        { prop: 'manageLevelName', label: '管理层级', width: '150', align: 'center', fixed: "", type: "" },
        { prop: 'diseaseContent', label: '病害内容', width: '150', align: 'center', fixed: "", type: "" },
        { prop: 'diseaseTypeName', label: '病害类型', width: '150', align: 'center', fixed: "", type: "160" },
        { prop: 'facilityTypeName', label: '设施类型', width: '', align: 'center', fixed: "", type: "" },
        { prop: 'facilityLevel1', label: '设施等级', width: '100', align: 'center', fixed: "", type: "" },
        { prop: 'componentTypeName', label: '构件/设备类型', width: '', align: 'center', fixed: "", type: "" },
        { prop: 'jlUnit', label: '单位', width: '80', align: 'center', fixed: "", type: "" },
      ],
      tableData: [],
      // 分页器
      pagination: {
        total: 0,
        per_page: 10,
        from: 1,
        to: 0,
        current_page: 1, //当前页数
      },

      // 
      title: '',
      addVisible: false,
      ruleForm: {},
      goujianOptions: [],
      binghaiOptions: [],
      sheshileixingOptions: [],
      guanlicengjiOptions: [],
      sheshiDengJiOptions: [
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 },
      ]
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.reqTableData(1);
    this.reqDataList();
  },

  beforeDestroy() { },

  methods: {
    // 重置事件
    resetReq() {
      this.searchForm = { pageNum: 1, pageSize: 10, diseaseContent: '', diseaseTypeUuid: '', facilityTypeUuid: '', componentTypeUuid: '', };
      this.pagination = { total: 0, per_page: 10, from: 1, to: 0, current_page: 1, };
      this.reqTableData();
    },
    // 获取数据列表
    reqDataList() {
      // 获取病害类型筛选项
      this.sendPost('/OftenType/getSonOftenTypeParent', { oftenName: '病害类型' }).then(res => {
        this.binghaiOptions = res.data.list;
      })
      // 获取管理层级筛选项
      this.sendPost('/OftenType/getSonOftenTypeParent', { oftenName: '管理层级' }).then(res => {
        this.guanlicengjiOptions = res.data.list;
      })
      // 获取构件筛选项
      this.sendPost('/componentType/getComponentTypeByObj', {}).then(res => {
        this.goujianOptions = res.data.list;
      })
      // 获取设施类型筛选项
      this.sendPost('/facilityType/getFacilityTypeByObj', {}).then(res => {
        this.sheshileixingOptions = res.data.list;
        this.sheshileixingOptions.forEach((item1) => {
          if (item1.list.length !== 0) {
            item1.list.forEach(item2 => {
              if (item2.list.length !== 0) {
                item2.list.forEach(item3 => {
                  if (item3.list.length !== 0) {
                    delete item3.list
                  } else {
                    delete item3.list
                  }
                })
              } else {
                delete item2.list
              }
            })
          } else {
            delete item1.list
          }
        })
      })

    },
    // 初始请求
    reqTableData(page) {
      // 获取病害表格列表
      if (page) {
        this.pagination.current_page = page;
      }
      this.loading = true;
      let data = {
        ...this.searchForm,
        pageNum: this.pagination.current_page,
        pageSize: this.pagination.per_page,
      };
      this.sendPost('/disease/getDiseaseByObj', data).then(res => {
        this.tableData = res.data.list || [];
        this.pagination.total = res.data.total;
        this.tableData.forEach(ele => {
          if (ele.facilityLevel == 1) {
            ele.facilityLevel1 = '一级';
          } else if (ele.facilityLevel == 2) {
            ele.facilityLevel1 = '二级';
          } else if (ele.facilityLevel == 3) {
            ele.facilityLevel1 = '三级';
          }
        })
        this.loading = false;
      })
    },
    // 新增设施分类
    addItem() {
      this.ruleForm = {};
      this.title = '新增病害标准'
      this.addVisible = true;
    },
    // 编辑
    editRow(row) {
      this.ruleForm = {};
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.title = '编辑病害标准'
      this.addVisible = true
    },
    // 新增病害确定事件
    addSubmit(data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          // 所属设施分类UUid重新赋值
          if (this.ruleForm.facilityTypeUuid.constructor === Array) {
            this.ruleForm.facilityTypeUuid = this.ruleForm.facilityTypeUuid[1];
          }
          // 管理层级名字赋值
          this.guanlicengjiOptions.forEach(ele => {
            if (ele.oftenUuid == this.ruleForm.manageLevelUuid) {
              this.ruleForm.manageLevelName = ele.oftenName;
            }
          })
          // 病害标准名字赋值
          this.binghaiOptions.forEach(ele => {
            if (ele.oftenUuid == this.ruleForm.diseaseTypeUuid) {
              this.ruleForm.diseaseTypeName = ele.oftenName;
            }
          })
          // 病害标准名字赋值
          this.goujianOptions.forEach(ele => {
            if (ele.componentTypeUuid == this.ruleForm.componentTypeUuid) {
              this.ruleForm.componentTypeName = ele.componentTypeName;
            }
          })
          this.sendPost('/disease/insertOrUpdateDisease', this.ruleForm).then(res => {
            if (res.errcode == 0) {
              this.suc({ message: res.errmsg })
              this.reqTableData(1);
              this.ruleForm = {};
            } else {
              this.err({ message: res.errmsg })
            }
          })
          this.addVisible = false
          console.log(this.ruleForm);
        } else {
          console.log('请填写');
          return false;
        }
      });
    },
    // 删除
    delRow(row) {
      console.log('删除', row);
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/disease/delete', { id: row.id }).then(res => {
          if (res.errcode == 0) {
            this.suc({ message: res.errmsg })
            this.reqTableData();
          } else {
            this.err({ message: res.errmsg })
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    // 所属设施类型的change事件
    getSheShi(val) {
      this.sheshileixingOptions.forEach(ele => {
        if (ele.list != undefined) {
          ele.list.forEach(item => {
            if (item.facilityTypeUuid == val[1]) {
              this.ruleForm.facilityTypeName = item.facilityTypeName;
            }
          })
        }
      })
    },
    // 设施分类筛选项change事件
    selSheShi(val) {
      this.searchForm.facilityTypeUuid = val[1];
    },
    // 分页器----新每页条数
    handleSizeChange(val) {
      this.pagination.per_page = val;
      this.searchForm.pageSize = val;
      this.reqTableData(1);
    },
    // 分页器-----新当前页
    handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.searchForm.pageNum = val;
      this.reqTableData();
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss">
.tableStyle {
  margin: 5px 0 0;
}

.is-center {
  padding: 0 !important;
}


.table_top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.itemP {
  line-height: 60px;
  text-align: center;
}
</style>
